<template>
  <header>
    <div class="navbar">
      <div class="logo">English Reader</div>
      <div class="nav-links">
        <a href="#">首页</a>
        <a href="#">背单词</a>
        <a href="#">阅读练习</a>
        <a href="#">写作文</a>
        <a href="#">学习计划与统计</a>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="hero">
      <h1>提升英语阅读能力的最佳平台</h1>
      <p>
        探索精选文章，扩充词汇量，提高阅读理解能力。我们提供了各类主题的高质量阅读材料，适合不同水平的学习者。
      </p>
      <a href="#categories" class="btn">开始探索</a>
    </div>

    <h2 class="section-title">阅读类别</h2>
    <div id="categories" class="categories-grid">
      <!-- 社会 -->
      <div class="category-card" onclick="selectCategory('society')">
        <div class="category-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">社会</h3>
          <div class="category-count">35篇文章</div>
          <p>探索人类社会、社区与文化，深入了解全球社会问题与发展趋势。</p>
        </div>
      </div>

      <!-- 历史 -->
      <div class="category-card" onclick="selectCategory('history')">
        <div class="category-icon">
          <i class="fas fa-landmark"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">历史</h3>
          <div class="category-count">42篇文章</div>
          <p>追溯历史发展脉络，探索重要历史事件，了解人类文明演进过程。</p>
        </div>
      </div>

      <!-- 经济 -->
      <div class="category-card" onclick="selectCategory('economy')">
        <div class="category-icon">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">经济</h3>
          <div class="category-count">28篇文章</div>
          <p>了解全球经济趋势，学习经济理论与模型，掌握基础经济知识。</p>
        </div>
      </div>

      <!-- 文化 -->
      <div class="category-card" onclick="selectCategory('culture')">
        <div class="category-icon">
          <i class="fas fa-theater-masks"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">文化</h3>
          <div class="category-count">38篇文章</div>
          <p>探索世界多元文化，了解传统习俗与艺术形式，拓展文化视野。</p>
        </div>
      </div>

      <!-- 科技 -->
      <div class="category-card" onclick="selectCategory('technology')">
        <div class="category-icon">
          <i class="fas fa-laptop-code"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">科技</h3>
          <div class="category-count">45篇文章</div>
          <p>追踪最新科技发展，了解前沿技术创新，掌握科技英语词汇。</p>
        </div>
      </div>

      <!-- 科学 -->
      <div class="category-card" onclick="selectCategory('science')">
        <div class="category-icon">
          <i class="fas fa-flask"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">科学</h3>
          <div class="category-count">32篇文章</div>
          <p>探索自然科学奥秘，了解科研进展，学习科学思维方法。</p>
        </div>
      </div>

      <!-- 其他 -->
      <div class="category-card" onclick="selectCategory('others')">
        <div class="category-icon">
          <i class="fas fa-globe-americas"></i>
        </div>
        <div class="category-content">
          <h3 class="category-title">其他</h3>
          <div class="category-count">27篇文章</div>
          <p>生活、旅游、健康等多元主题，满足不同兴趣的学习需求。</p>
        </div>
      </div>
    </div>

    <h2 class="section-title">精选文章</h2>
    <div class="featured-articles">
      <!-- 精选文章 1 -->
      <div class="article-card" onclick="viewArticle(1)">
        <div class="article-thumbnail">
          <span class="article-badge">科技</span>
          <div>THE FUTURE OF AI</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            The Future of Artificial Intelligence: Challenges and Opportunities
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>2,384 阅读</span>
            <span><i class="far fa-clock mr-2"></i>12 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            Explore how artificial intelligence is transforming our world and
            what the future may hold for this rapidly evolving technology.
          </p>
        </div>
      </div>

      <!-- 精选文章 2 -->
      <div class="article-card" onclick="viewArticle(2)">
        <div class="article-thumbnail">
          <span class="article-badge">文化</span>
          <div>CULTURAL HERITAGE</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Preserving Global Cultural Heritage in the Digital Age
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>1,842 阅读</span>
            <span><i class="far fa-clock mr-2"></i>8 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            Discover how technology is helping to preserve cultural treasures
            and traditions for future generations around the world.
          </p>
        </div>
      </div>

      <!-- 精选文章 3 -->
      <div class="article-card" onclick="viewArticle(3)">
        <div class="article-thumbnail">
          <span class="article-badge">经济</span>
          <div>SUSTAINABLE ECONOMY</div>
        </div>
        <div class="article-content">
          <h3 class="article-title">
            Sustainable Economic Development: Balancing Growth and Environmental
            Protection
          </h3>
          <div class="article-meta">
            <span><i class="far fa-eye mr-2"></i>1,956 阅读</span>
            <span><i class="far fa-clock mr-2"></i>10 min 阅读时间</span>
          </div>
          <p class="article-excerpt">
            Examine the critical relationship between economic development and
            environmental sustainability in the 21st century.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="../css/english/reading-home.css"></style>